<script setup lang="ts">
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface Counselor {
  id: number
  name: string
  title: string
  specialization: string
  status: string
  email: string
  phone: string
}

const tableData = ref<Counselor[]>([
  {
    id: 1,
    name: '张医生',
    title: '主任心理咨询师',
    specialization: '抑郁症、焦虑症',
    status: '在职',
    email: 'zhang@example.com',
    phone: '13800138000'
  },
  {
    id: 2,
    name: '李医生',
    title: '心理咨询师',
    specialization: '人际关系、学业压力',
    status: '在职',
    email: 'li@example.com',
    phone: '13800138001'
  }
])

const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

const handleSearch = () => {
  // TODO: 实现搜索功能
}

const dialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const currentCounselor = ref<Counselor>({
  id: 0,
  name: '',
  title: '',
  specialization: '',
  status: '在职',
  email: '',
  phone: ''
})

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  title: [{ required: true, message: '请输入职称', trigger: 'blur' }],
  specialization: [{ required: true, message: '请输入专长领域', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
  ]
}

const handleAdd = () => {
  dialogType.value = 'add'
  currentCounselor.value = {
    id: 0,
    name: '',
    title: '',
    specialization: '',
    status: '在职',
    email: '',
    phone: ''
  }
  dialogVisible.value = true
}

const handleEdit = (row: Counselor) => {
  dialogType.value = 'edit'
  currentCounselor.value = { ...row }
  dialogVisible.value = true
}

const handleDelete = (row: Counselor) => {
  ElMessageBox.confirm('确定要删除该咨询师吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tableData.value = tableData.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  }).catch(() => { })
}

const handleSubmit = () => {
  if (dialogType.value === 'add') {
    // 模拟新增
    currentCounselor.value.id = tableData.value.length + 1
    tableData.value.push(currentCounselor.value)
    ElMessage.success('添加成功')
  } else {
    // 模拟编辑
    const index = tableData.value.findIndex(item => item.id === currentCounselor.value.id)
    tableData.value.splice(index, 1, currentCounselor.value)
    ElMessage.success('修改成功')
  }
  dialogVisible.value = false
}
</script>

<template>
  <div class="counselors-container">
    <div class="header">
      <h2>咨询师管理</h2>
      <div class="actions">
        <el-input v-model="searchQuery"
          placeholder="搜索咨询师"
          class="search-input"
          @keyup.enter="handleSearch">
          <template #append>
            <el-button @click="handleSearch">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
        <el-button type="primary"
          @click="handleAdd">添加咨询师</el-button>
      </div>
    </div>

    <el-table :data="tableData"
      style="width: 100%"
      table-layout="fixed"
      border>
      <el-table-column prop="id"
        label="ID"
        width="80"
        align="center" />
      <el-table-column prop="name"
        label="姓名"
        width="120" />
      <el-table-column prop="title"
        label="职称"
        width="150" />
      <el-table-column prop="specialization"
        label="专长领域"
        min-width="200" />
      <el-table-column prop="status"
        label="状态"
        width="100"
        align="center" />
      <el-table-column prop="email"
        label="邮箱"
        width="180" />
      <el-table-column prop="phone"
        label="联系电话"
        width="150" />
      <el-table-column label="操作"
        width="150"
        align="center"
        fixed="right">
        <template #default="{ row }">
          <el-button link
            type="primary"
            @click="handleEdit(row)">编辑</el-button>
          <el-button link
            type="danger"
            @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogType === 'add' ? '添加咨询师' : '编辑咨询师'"
      v-model="dialogVisible"
      width="600px">
      <el-form :model="currentCounselor"
        :rules="rules"
        label-width="100px"
        ref="formRef">
        <el-form-item label="姓名"
          prop="name">
          <el-input v-model="currentCounselor.name" />
        </el-form-item>
        <el-form-item label="职称"
          prop="title">
          <el-input v-model="currentCounselor.title" />
        </el-form-item>
        <el-form-item label="专长领域"
          prop="specialization">
          <el-input v-model="currentCounselor.specialization" />
        </el-form-item>
        <el-form-item label="状态"
          prop="status">
          <el-select v-model="currentCounselor.status">
            <el-option label="在职"
              value="在职" />
            <el-option label="离职"
              value="离职" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱"
          prop="email">
          <el-input v-model="currentCounselor.email" />
        </el-form-item>
        <el-form-item label="联系电话"
          prop="phone">
          <el-input v-model="currentCounselor.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"
          @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <div class="pagination">
      <el-pagination v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="50"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper" />
    </div>
  </div>
</template>

<style scoped>
.counselors-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
